import React, {useEffect, useRef} from "react";
import anime from "animejs";

import "./selector.less"

/**
 * 可通过多种方式给targets赋值
 * 1. css selector: .item
 * 2. Dom Node 或 NodeList: document.querySelector('.item'), document.querySelectorAll('.item')
 * 3. JS Object，可参考官网示例：https://animejs.com/documentation/#JSobject
 * 4. array: ['.item', domNode, jsObject]
 */
const Selector = () => {

  useEffect(() => {
    anime({
      targets: ".el",
      translateX: 550, // X轴方向移动距离
      delay: function(el, i) {
        return i * 100;
      }, // 延迟触发
      loop: true, // 无限循环
      direction: "alternate",
      easing: "easeInOutSine"
    })
  }, [])

  return (
    <>
      <div className="el" />
    </>
  )
}

export default Selector;